<template>
  <div>
    <el-dialog
      title="编辑分类"
      :visible.sync="Editshows"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
      >
        <el-form-item label="修改分类" prop="cat_name">
          <el-input v-model="ruleForm.cat_name">{{
            ruleForm.cat_name
          }}</el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="dialogVisible">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        cat_name: "",
      },
      rules: {
        cat_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
    };
  },
  props: {
    EditData: {
      type: Object,
      defaule: true,
    },
    Editshows: {
      type: Boolean,
      defaule: true,
    },
  },
  watch: {
    EditData: function (newval, oldval) {
        this.ruleForm.cat_name=newval.cat_name
      console.log(newval);
    },
  },
  methods: {
    handleClose() {
      this.$emit("closeEdit");
    },
    dialogVisible(){
        this.$refs.ruleForm.validate((vaild)=>{
            if(!vaild) return;
           this.$axios.put(`categories/${this.EditData.cat_id}`,{cat_name:this.ruleForm.cat_name}).then(res=>{
               console.log(res)
               if(res.data.meta.status==200){
                   this.$message({
                       type:'success',
                       message:res.data.meta.msg
                   })
                    this.$emit("updataEdit");
                 this.$emit("closeEdit");
               }else{
                    this.$message({
                       type:'error',
                       message:res.data.meta.msg
                   })
               }
           })
        })
    }
  },
};
</script>
<style lang='scss' scoped>
</style>